<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="../js/jweixin-1.2.0.js"></script>
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:0;
            font-family:"微软雅黑";
        }
        #allmap{
            width:100%;
            height:100%;
        }
        #b_sport {
            position: absolute;
            top: 70%;
            left: 33%;
            font-size: 30px;
            font-family: "微软雅黑";
            width: 120px;
            height: 120px;
            line-height:45px;
            color:#FFF;
            display: inline-block;
            padding: .3em .5em;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 50%;
            box-shadow: 0 1px white inset;
            text-align: center;
            text-shadow: 0 1px 1px black;
            color: white;
        }
        #b_sport:active{
            -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
        }
        #b_sport:before {
            background:#f0f0f0;
            background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
            border-radius:50%;
            -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
            -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
            box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;

            position: absolute;
            content: "";
            left: -10px; right: -10px;
            top: -10px; bottom: -16px;
            z-index: -1;
        }
        #b_sport:active:before{
            top: -8px;
            bottom: -8px;
            content: "";
        }
        #b_sport {

            text-shadow:-1px -1px 0 #2C7982;
            background: #3EACBA;
            border:1px solid #379AA4;
            background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:linear-gradient(top, #48C6D4, #3EACBA);
            border-radius:50%;

            -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
            -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
            box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
        }

        #b_sport:hover {
            background: #48C6D4;
            background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:linear-gradient(top, #3EACBA, #48C6D4);
        }
        #b_weather {
            position: absolute;
            top: 85%;
            left: 80%;
            font-size: 15px;
            font-family: "微软雅黑";
            width: 60px;
            height: 60px;
            line-height:20px;
            color:#FFF;
            padding: .3em .5em;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 50%;
            box-shadow: 0 1px white inset;
            text-align: center;
            text-shadow: 0 1px 1px black;
            color: white;
        }
        #b_weather:active{
            -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
        }
        #b_weather:before {
            background:#f0f0f0;
            background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
            border-radius:50%;
            -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
            -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
            box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;

            position: absolute;
            content: "";
            left: -5px; right: -5px;
            top: -5px; bottom: -8px;
            z-index: -1;
        }
        #b_weather:active:before{
            top: -4px;
            bottom: -4px;
            content: "";
        }
        #b_weather {

            text-shadow:-1px -1px 0 #2C7982;
            background: #3EACBA;
            border:1px solid #379AA4;
            background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
            background-image:linear-gradient(top, #48C6D4, #3EACBA);
            border-radius:50%;

            -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
            -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
            box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
        }

        #b_weather:hover {
            background: #48C6D4;
            background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
            background-image:linear-gradient(top, #3EACBA, #48C6D4);
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../js/config.js">
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Xyiagrrc6TszGnVTxdlDdzp4uj2UkfTj"></script>
    <title>运动页面</title>
    <script type="text/javascript" src="../js/sport.js"></script>
    <script src="../js/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/sweetalert.css">
</head>
<body>

<div id="aaa"></div>
<div id="allmap"></div>
<button style="display: none" id="b_sport" class="btn btn-primary" >开始跑步</button>
<button style="display: none" id="b_weather" >天气原因</button>
<input type="hidden" id="h_sportType" value="1"/>
<!--
    value=1:表示开始跑步
    value=2:表示运动健身
    value=3:表示中途打卡
    value=4:表示结束跑步
    -->
</body>
</html>

